<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="form" enctype="multipart/form-data">
                <p:panel styleClass="withoutBorder" rendered="#{!managerLayout.desabilitarMapa() and managerEditarFaceQuadra.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <h3 class="title">Editar Faces de Quadra</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true" />

                <p:panel id="dadosGeraisPanel" styleClass="container_24 clearfix withoutBorder">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="Setor" styleClass="grid_3" for="setor" />
                    <div class="grid_8">
                        <p:selectOneMenu id="setor" panelStyle="width:150px;" converter="setorconverter"
                                         value="#{managerEditarFaceQuadra.setor}" 
                                         required="true" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.setor}"/>

                            <p:ajax update="@this, :form:map, :form:quadra" listener="#{managerEditarFaceQuadra.mapearSetor(true)}" />
                        </p:selectOneMenu> 
                    </div>

                    <p:outputLabel value="Quadra" styleClass="grid_3" for="quadra"/>
                    <div class="grid_8">
                        <p:selectOneMenu id="quadra" panelStyle="width:150px;" converter="quadraconverter"
                                         value="#{managerEditarFaceQuadra.faceQuadra.quadra}" 
                                         required="true" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.getQuadra(managerEditarFaceQuadra.setor)}"/>

                            <p:ajax update=":form:map" listener="#{managerEditarFaceQuadra.mapearQuadra}" />
                        </p:selectOneMenu> 
                    </div>
                </p:panel>

                <p:panel id="faceQuadraPanel" styleClass="container_24 clearfix withoutBorder">
                    <h4 class="title">Face de Quadra</h4>

                    <p:outputLabel value="UFMP" styleClass="grid_3" for="ufmp">
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <p:inputText id="ufmp" styleClass="grid_7" value="#{managerEditarFaceQuadra.faceQuadra.valorUfmp}"
                                 onkeypress="jQuery(this).autoNumeric({aSep: '.', aDec: ','} );">
                        <f:convertNumber pattern="#,###,##0.00" locale="pt,BR"/>
                    </p:inputText>
                    <div class="clear"/>

                    <p:outputLabel value="Bairro" styleClass="grid_3" for="bairro">
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <p:autoComplete id="bairro" styleClass="grid_20" dropdown="true" converter="bairroconverter"
                                    var="bairro" itemLabel="#{bairro.nome}" style="margin-top: -2px"
                                    itemValue="#{bairro}" value="#{managerEditarFaceQuadra.bairro}"
                                    scrollHeight="200" forceSelection="true"
                                    completeMethod="#{managerUtilitario.autocompleteBairroPorCidade}">
                        <p:ajax event="itemSelect" update=":form:logradouro" />
                    </p:autoComplete>
                    <div class="clear"/>

                    <p:outputLabel value="Logradouro" styleClass="grid_3 logradouroLabelFaceQuadra" for="logradouro">
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <p:autoComplete id="logradouro" styleClass="grid_20" dropdown="true" converter="dneconverter"
                                    var="logradouro" itemLabel="#{logradouro.rua}" style="margin-top: -2px"
                                    itemValue="#{logradouro}" value="#{managerEditarFaceQuadra.faceQuadra.dne}"
                                    scrollHeight="200" forceSelection="true" 
                                    completeMethod="#{managerEditarFaceQuadra.autocompleteDne}"/>
                    <div class="clear"/>
                </p:panel>

                <div class="buttonAction">
                    <p:commandButton id="adicionarCommandButton" value="Adicionar" icon="ui-icon-plus" 
                                     update=":form:faceQuadrasDataTable, :form:faceQuadraPanel"
                                     oncomplete="required(false)"
                                     actionListener="#{managerEditarFaceQuadra.adicionarFaceQuadra()}" />
                    <p:commandButton value="Limpar" icon="ui-icon-clean"
                                     actionListener="#{managerEditarFaceQuadra.limpar()}"
                                     update="@form" process="@this" />
                </div>

                <p:panel id="faceQuadrasPanel" styleClass="container_24 clearfix withoutBorder">
                    <p:dataTable id="faceQuadrasDataTable" var="item" value="#{managerEditarFaceQuadra.faceQuadras}"
                                 styleClass="grid_24" rowIndexVar="rowid" style="white-space: pre-wrap;" 
                                 rows="5" paginator="true" lazy="true"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                 currentPageReportTemplate="{currentPage} de {totalPages}"
                                 paginatorPosition="bottom" emptyMessage="Nenhum registro">

                        <f:facet name="header">
                            <p:outputLabel value="Faces de Quadra #{managerEditarFaceQuadra.faceQuadras.size() eq 0 ? '' : '('.concat(managerEditarFaceQuadra.faceQuadras.size()).concat(')')}" />
                        </f:facet>
                        <p:column headerText="Ação" width="120">
                            <p:commandButton title="Editar" icon="ui-icon-pencil"
                                             update=":form:faceQuadrasDataTable, :form:faceQuadraPanel"
                                             actionListener="#{managerEditarFaceQuadra.editarFaceQuadra(item)}"/>
                            <p:commandButton title="Excluir" icon="ui-icon-trash"
                                             update=":form:faceQuadrasDataTable, :form:faceQuadraPanel"
                                             actionListener="#{managerEditarFaceQuadra.removerFaceQuadra(item)}"/>
                        </p:column>

                        <p:column headerText="UFMP" width="120">
                            <h:outputText value="#{item.valorUfmp}" />
                        </p:column>
                        <p:column headerText="Logradouro">
                            <h:outputText value="#{item.dne.rua}"/>
                        </p:column>
                    </p:dataTable> 
                </p:panel>

                <br/>
                <h4 class="title">Georreferenciamento</h4>

                <p:panel id="map" styleClass="container_24 clearfix withoutBorder">

                    <div class="buttonAction">

                        <p:gmap id="mapa" center="#{managerEditarFaceQuadra.centroMapa}" zoom="#{managerEditarFaceQuadra.zoomLevelMapa}" 
                                rendered="#{!managerLayout.desabilitarMapa() and managerEditarFaceQuadra.connect}" type="HYBRID" 
                                style="width:97%;height:500px" model="#{managerEditarFaceQuadra.mapModel}" >

                            <p:ajax event="stateChange" listener="#{managerEditarFaceQuadra.onStateChange}"/>
                        </p:gmap>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                       rendered="#{!managerLayout.desabilitarMapa() and !managerEditarFaceQuadra.connect}"/>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                       rendered="#{managerLayout.desabilitarMapa()}"/>
                    </div>
                </p:panel>

                <br/>
                <div class="buttonAction">
                    <p:commandButton value="Salvar" icon="ui-icon-disk" 
                                     update="@form" actionListener="#{managerEditarFaceQuadra.salvar()}"
                                     styleClass="ui-priority-primary" />

                    <p:button href="pesquisarfacequadra.xhtml" value="Cancelar"  icon="ui-icon-trash" />
                </div >
            </h:form>

            <script language="JavaScript" type="text/javascript">
                function required(rqd){
                    if(rqd){
                        $('#form\\:faceQuadraPanel .ui-outputlabel').each(function() {
                            var id = $(this).attr('for').replace(':', '\\:');
                            /* <![CDATA[ */
                            if ($(this).children('span').hasClass('required') && ($('#' + id).val() == '')) {
                                $(this).addClass('ui-state-error');
                                $('#' + id).addClass('ui-state-error');
                            }
                            /* ]]> */
                        });
                    }else{
                        $('#form\\:faceQuadraPanel').children().removeClass('ui-state-error');
                    }
                }
            </script>

        </ui:define>

    </ui:composition>

</html>
